<template>
  <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-left: 30px;">
    <el-tab-pane label="资产数据" name="first">
      <el-table :key="tableKey" v-loading="listLoading" :data="first_data" size="mini" border fit highlight-current-row style="width: 100%;">
          <el-table-column label="时间维度" align="center" >
            <template slot-scope="{row}">
              <span>{{ row.month }}</span>
            </template>
          </el-table-column>

          <el-table-column label="当月新增放款金额" align="center">
            <template slot-scope="{row}">
              <span>{{ row.new_project_money }}</span>
            </template>
          </el-table-column>

          <el-table-column label="当月新增放款笔数" align="center">
            <template slot-scope="{row}">
              <span>{{ row.new_number }}</span>
            </template>
          </el-table-column>

          <el-table-column label="月末时点余额" align="center">
            <template slot-scope="{row}">
              <span>{{ row.month_end_benjin }}</span>
            </template>
          </el-table-column>

          <el-table-column label="月末时余额客户数" align="center">
            <template slot-scope="{row}">
              <span>{{ row.month_end_number }}</span>
            </template>
          </el-table-column>
          <el-table-column label="月末时点逾期金额0-30" align="center">
            <template slot-scope="{row}">
              <span>{{ row.benjin0 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="月末时点逾期金额30+" align="center">
            <template slot-scope="{row}">
              <span>{{ row.benjin1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="月末时点逾期金额60+" align="center">
            <template slot-scope="{row}">
              <span>{{ row.benjin2 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="月末时点逾期金额90+" align="center">
            <template slot-scope="{row}">
              <span>{{ row.benjin3 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="月末时点逾期率(客户口径)" align="center" width="120">
            <template slot-scope="{row}">
              <span>{{ row.overdue_rate_money }}</span>
            </template>
          </el-table-column>
          <el-table-column label="月末时点逾期率(余额口径)" align="center"  width="120">
            <template slot-scope="{row}">
              <span>{{ row.overdue_rate_customer }}</span>
            </template>
          </el-table-column>
          
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="额度区间" name="second">
      <el-table :key="tableKey" v-loading="listLoading" :data="second_data" size="mini" border fit highlight-current-row style="width: 100%;">
          <el-table-column label="额度区间" align="center" width="140">
            <template slot-scope="{row}">
              <span>{{ row.title }}</span>
            </template>
          </el-table-column>

          <el-table-column label="累计贷款金额" align="center" width="120">
            <template slot-scope="{row}">
              <span>{{ row.total_money }}</span>
            </template>
          </el-table-column>

          <el-table-column label="累计贷款笔数" align="center" width="120">
            <template slot-scope="{row}">
              <span>{{ row.order_num }}</span>
            </template>
          </el-table-column>

          <el-table-column label="当前时点余额" align="center" width="120">
            <template slot-scope="{row}">
              <span>{{ row.benjin }}</span>
            </template>
          </el-table-column>

          <el-table-column label="余额对应客户数" align="center" width="120">
            <template slot-scope="{row}">
              <span>{{ row.customer }}</span>
            </template>
          </el-table-column>
          <el-table-column label="逾期[1-30]天的笔数" align="center">
            <template slot-scope="{row}">
              <span>{{ row.d1_30_num }}</span>
            </template>
          </el-table-column>
          <el-table-column label="逾期[1-30]天的金额" align="center">
            <template slot-scope="{row}">
              <span>{{ row.d1_30_money }}</span>
            </template>
          </el-table-column>
          
          <el-table-column label="逾期[31-60]天的金额" align="center">
            <template slot-scope="{row}">
              <span>{{ row.d31_60_money }}</span>
            </template>
          </el-table-column>
          <el-table-column label="逾期[61-90]天的金额" align="center">
            <template slot-scope="{row}">
              <span>{{ row.d61_90_money }}</span>
            </template>
          </el-table-column>
          <el-table-column label="逾期90天以上的金额" align="center">
            <template slot-scope="{row}">
              <span>{{ row.d90_money }}</span>
            </template>
          </el-table-column>
          <el-table-column label="逾期90天以上的笔数" align="center" >
            <template slot-scope="{row}">
              <span>{{ row.d90_num }}</span>
            </template>
          </el-table-column>
         
          
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="贷款期限" name="third">
      <el-table :key="tableKey" v-loading="listLoading" :data="third_data" size="mini" border fit highlight-current-row style="width: 100%;">
          <el-table-column label="贷款期限" align="center" width="140">
            <template slot-scope="{row}">
              <span>{{ row.title }}</span>
            </template>
          </el-table-column>

          <el-table-column label="累计贷款金额" align="center" width="120">
            <template slot-scope="{row}">
              <span>{{ row.total_money }}</span>
            </template>
          </el-table-column>

          <el-table-column label="累计贷款笔数" align="center" width="120">
            <template slot-scope="{row}">
              <span>{{ row.order_num }}</span>
            </template>
          </el-table-column>

          <el-table-column label="当前时点余额" align="center" width="120">
            <template slot-scope="{row}">
              <span>{{ row.benjin }}</span>
            </template>
          </el-table-column>

          <el-table-column label="余额对应客户数" align="center" width="120">
            <template slot-scope="{row}">
              <span>{{ row.customer }}</span>
            </template>
          </el-table-column>
          <el-table-column label="逾期[1-30]天的笔数" align="center">
            <template slot-scope="{row}">
              <span>{{ row.d1_30_num }}</span>
            </template>
          </el-table-column>
          <el-table-column label="逾期[1-30]天的金额" align="center">
            <template slot-scope="{row}">
              <span>{{ row.d1_30_money }}</span>
            </template>
          </el-table-column>
          
          <el-table-column label="逾期[31-60]天的金额" align="center">
            <template slot-scope="{row}">
              <span>{{ row.d31_60_money }}</span>
            </template>
          </el-table-column>
          <el-table-column label="逾期[61-90]天的金额" align="center">
            <template slot-scope="{row}">
              <span>{{ row.d61_90_money }}</span>
            </template>
          </el-table-column>
          <el-table-column label="逾期90天以上的金额" align="center">
            <template slot-scope="{row}">
              <span>{{ row.d90_money }}</span>
            </template>
          </el-table-column>
          <el-table-column label="逾期90天以上的笔数" align="center" >
            <template slot-scope="{row}">
              <span>{{ row.d90_num }}</span>
            </template>
          </el-table-column>
         
          
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="城市分布" name="fourth">
      <el-table :key="tableKey" v-loading="listLoading" :data="fourth_data" size="mini" border fit highlight-current-row style="width: 100%;">
          <el-table-column label="城市" align="center" width="140">
            <template slot-scope="{row}">
              <span>{{ row.title }}</span>
            </template>
          </el-table-column>

          <el-table-column label="累计贷款金额" align="center" width="120">
            <template slot-scope="{row}">
              <span>{{ row.total_money }}</span>
            </template>
          </el-table-column>

          <el-table-column label="累计贷款笔数" align="center" width="120">
            <template slot-scope="{row}">
              <span>{{ row.order_num }}</span>
            </template>
          </el-table-column>

          <el-table-column label="当前时点余额" align="center" width="120">
            <template slot-scope="{row}">
              <span>{{ row.benjin }}</span>
            </template>
          </el-table-column>

          <el-table-column label="余额对应客户数" align="center" width="120">
            <template slot-scope="{row}">
              <span>{{ row.customer }}</span>
            </template>
          </el-table-column>
          <el-table-column label="逾期[1-30]天的笔数" align="center">
            <template slot-scope="{row}">
              <span>{{ row.d1_30_num }}</span>
            </template>
          </el-table-column>
          <el-table-column label="逾期[1-30]天的金额" align="center">
            <template slot-scope="{row}">
              <span>{{ row.d1_30_money }}</span>
            </template>
          </el-table-column>
          
          <el-table-column label="逾期[31-60]天的金额" align="center">
            <template slot-scope="{row}">
              <span>{{ row.d31_60_money }}</span>
            </template>
          </el-table-column>
          <el-table-column label="逾期[61-90]天的金额" align="center">
            <template slot-scope="{row}">
              <span>{{ row.d61_90_money }}</span>
            </template>
          </el-table-column>
          <el-table-column label="逾期90天以上的金额" align="center">
            <template slot-scope="{row}">
              <span>{{ row.d90_money }}</span>
            </template>
          </el-table-column>
          <el-table-column label="逾期90天以上的笔数" align="center" >
            <template slot-scope="{row}">
              <span>{{ row.d90_num }}</span>
            </template>
          </el-table-column>
         
          
      </el-table>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import {
  getFirstData,getseconddData,getThirdtData,getFourthData
} from '@/api/finance_excel'
import waves from '@/directive/waves' // waves directive

import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  name: 'ReceiveTable',
  components: {
    Pagination
  },
  directives: {
    waves
  },
  data() {
    return {
      listLoading: true,
      tableKey: 0,
      activeName: 'first',
      first_data:[],
      second_data:[],
      third_data:[],
      fourth_data:[],
    }
  },

  created(){
    this.getFirstData()
  },
  methods: {
    handleClick(tab) {
        if(tab.name=='first'){
          this.getFirstData()
        }
        if(tab.name=='second'){
          this.getseconddData()
        }
        if(tab.name=='third'){
          this.getThirdtData()
        }
        if(tab.name=='fourth'){
          this.getFourthData()
        }
        
    },
    //资产数据
    getFirstData(){
      getFirstData().then(response => {
        this.listLoading = false
        this.first_data = response.data
      })
    },
    //额度区间
    getseconddData(){
      getseconddData().then(response => {
        this.listLoading = false
        this.second_data = response.data
        console.log(this.second_data)
      })
    },
    //贷款期限
    getThirdtData(){
      getThirdtData().then(response => {
        this.listLoading = false
        this.third_data = response.data
      })
    },
    //城市分布
    getFourthData(){
      getFourthData().then(response => {
        this.listLoading = false
        this.fourth_data = response.data
      })
    },
    //导出
    excelout() {
      merchantdayexcelout(this.infoQuery).then(response => {
        this.listLoading = false
        const filepath = response.data.path
        window.location.href = filepath
      })
    },

  }
}
</script>

<style>
</style>
